<template>
  <div class="search-options">
    <ul>
      <li>
        <a :href="`/#/search?str=${searchWord}`" ref="article">
          Articles
        </a>
      </li>
      <li>
        <a :href="`/#/search/author?str=${searchWord}`" ref="author">
          Authors
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SearchOptions",
  props: {

  },
  data() {
    return {
      
    };
  },
  computed: {
    searchWord() {
      return this.$route.query.str;
    },
  },
  mounted() {
    const name = this.$route.name;
    this.setActive(name);
  },
  watch: {
    '$route' (route) {
      const name = route.name;
      this.setActive(name);
    }
  },
  methods: {
    setActive(name) {
      if (name == 'SearchArticle') {
        this.$refs.article.classList.add ("active");
        this.$refs.author.classList.remove ("active");
      }
      else if (name == 'SearchAuthor') {
        this.$refs.author.classList.add ("active");
        this.$refs.article.classList.remove ("active");
      }
    }
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.search-options {
  >ul {
    display: flex;
    list-style-type: none;
    border-top: #d9d9d9 solid 1px;
    border-bottom: #d9d9d9 solid 1px;
    background: #fafafa;
    >li {
      padding: 12px 15px;
      font-family: 'Merriweather Sans', sans-serif;
      >a {
        color: rgb(33, 109, 250);
      }
    }
  }

  .active {
    font-weight: bold;
    color: darkcyan;
  }
}
</style>
